<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>咨询师管理</el-breadcrumb-item>
		<el-breadcrumb-item>咨询师评价管理</el-breadcrumb-item>
	</el-breadcrumb>

	<el-form :inline="true" :model="queryEvaluation" class="demo-form-inline">
		<el-form-item label="评价内容">
			<el-input v-model="queryEvaluation.content" placeholder="请输入评价内容" clearable @clear="queryDataList" />
		</el-form-item>

		<el-form-item label="评分">
			<el-input-number v-model="queryEvaluation.score" :min="1" :max="10" :step="1" placeholder="请输入评分" clearable
				@clear="queryDataList" />
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="queryDataList">搜索</el-button>
			<el-button type="danger" @click="batchRemove">批量删除</el-button>
		</el-form-item>
	</el-form>

	<el-table :data="dataList" border row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
		<el-table-column type="selection" fixed="left" width="40" />
		<el-table-column property="id" label="ID" fixed="left" width="50" />
		<el-table-column property="content" label="评价内容"/>
		<el-table-column property="score" label="评分">
			<template #default="scope">
				{{scope.row.score}}
			</template>
		</el-table-column>
		<el-table-column property="evaluateTime" label="评价时间" />
		<el-table-column property="user.username" label="评价用户" />
		<el-table-column property="counselor.counselorName" label="被评价咨询师" />
		<el-table-column fixed="right" label="操作" min-width="60">
			<template #default='scope'>
				<el-button type="success" size="small" @click="check(scope.row)">查看</el-button>
				<el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-pagination v-model:current-page="queryEvaluation.pageNum" v-model:page-size="queryEvaluation.pageSize"
		:page-sizes="[5, 10, 15, 20]" size="default" layout="total, sizes, prev, pager, next, jumper" :total="total"
		@size-change="handleSizeChange" @current-change="handleCurrentChange" />

	<!-- 查看对话框 -->
	<el-dialog :title="title" v-model="checkDialogVisible" width="700">
		<el-form :model="evaluationData" label-width="120px">
			<el-form-item label="评价内容">
				<el-input v-model="evaluationData.content" type="textarea" rows="4" readonly />
			</el-form-item>
			<el-form-item label="评分">
				{{ evaluationData.score }}
			</el-form-item>
			<el-form-item label="评价时间">
				<el-input v-model="evaluationData.evaluateTime" readonly />
			</el-form-item>
			<el-form-item label="评价用户">
				<el-input v-model="evaluationData.user.username" readonly />
			</el-form-item>
			<el-form-item label="被评价咨询师">
				<el-input v-model="evaluationData.counselor.counselorName" readonly />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="checkDialogVisible = false">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { getCurrentInstance, onMounted, reactive, ref } from 'vue';

	// 定义接口类型，与后端实体一致
	interface User {
		id ?: number;
		username : string;
	}

	interface Counselor {
		id ?: number;
		counselorName : string;
	}

	interface CounselorEvaluation {
		id ?: number;
		content : string;
		score : number;
		evaluateTime : string;
		userId : number;
		counselorId : number;
		del ?: number;
		user ?: User;
		counselor ?: Counselor;
	}

	// 全局Axios
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;

	// 查询参数
	const queryEvaluation = reactive({
		content: '',
		score: undefined,
		userId: undefined,
		counselorId: undefined,
		pageNum: 1,
		pageSize: 5
	});

	// 表格数据
	const dataList = ref<CounselorEvaluation[]>([]);
	const total = ref(0);

	// 对话框状态
	const checkDialogVisible = ref(false);
	const title = ref('');

	// 查看数据
	const evaluationData = ref<CounselorEvaluation>({
		content: '',
		score: 0,
		evaluateTime: '',
		userId: 0,
		counselorId: 0,
		user: { username: '' },
		counselor: { counselorName: '' }
	});

	// 下拉选项数据（用户、咨询师列表）
	const userList = ref<User[]>([]);
	const counselorList = ref<Counselor[]>([]);

	// 页面加载时初始化
	onMounted(() => {
		queryDataList();
		loadUsers();
		loadCounselors();
	});

	// 获取评价列表
	const queryDataList = () => {
		axios.get('/counselorEvaluation/page', { params: queryEvaluation })
			.then(resp => {
				if (resp.code === 200) {
					dataList.value = resp.data.list;
					total.value = resp.data.total;
				} else {
					ElMessage.error('查询评价列表失败：' + resp.msg);
				}
			})
			.catch(error => {
				ElMessage.error('网络错误：' + error.message);
			});
	};

	// 查看详情
	const check = (row : CounselorEvaluation) => {
		title.value = '查看评价';
		evaluationData.value = { ...row };
		checkDialogVisible.value = true;
	};

	// 删除
	const remove = (id : number) => {
		ElMessageBox.confirm(
			'确定要删除这条评价吗？',
			'确认删除',
			{ type: 'warning' }
		).then(() => {
			axios.delete(`/counselorEvaluation/${id}`)
				.then(resp => {
					if (resp.code === 200) {
						ElMessage.success('删除成功');
						queryDataList();
					} else {
						ElMessage.error(resp.msg || '删除失败');
					}
				});
		});
	};

	// 批量删除
	const multipleSelection = ref<number[]>([]);
	const handleSelectionChange = (val : CounselorEvaluation[]) => {
		multipleSelection.value = val.map(item => item.id!).filter(Boolean);
	};

	const batchRemove = () => {
		if (multipleSelection.value.length === 0) {
			ElMessage.warning('请选择要删除的评价');
			return;
		}
		ElMessageBox.confirm(
			`确定要删除选中的${multipleSelection.value.length}条评价吗？`,
			'批量删除',
			{ type: 'warning' }
		).then(() => {
			axios.delete('/counselorEvaluation', {
				params: { ids: multipleSelection.value.join(',') }
			}).then(resp => {
				if (resp.code === 200) {
					ElMessage.success('批量删除成功');
					queryDataList();
				} else {
					ElMessage.error(resp.msg || '批量删除失败');
				}
			});
		});
	};

	// 分页处理
	const handleSizeChange = (size : number) => {
		queryEvaluation.pageSize = size;
		queryDataList();
	};

	const handleCurrentChange = (page : number) => {
		queryEvaluation.pageNum = page;
		queryDataList();
	};

	// 加载用户列表
	const loadUsers = () => {
		axios.get('/user').then(resp => {
			if (resp.code === 200) {
				userList.value = resp.data;
			}
		});
	};

	// 加载咨询师列表
	const loadCounselors = () => {
		axios.get('/counselor').then(resp => {
			if (resp.code === 200) {
				counselorList.value = resp.data;
			}
		});
	};
</script>

<style scoped>
	.el-breadcrumb {
		border-bottom: 1px solid #eee;
		padding: 15px 0;
		margin-bottom: 20px;
	}

	.demo-form-inline {
		padding: 10px 0;
		margin-bottom: 20px;
	}

	.demo-form-inline .el-input,
	.demo-form-inline .el-input-number {
		width: 200px;
		margin-right: 15px;
	}

	.el-table {
		margin-bottom: 20px;
	}

	.el-pagination {
		text-align: right;
		margin-top: 15px;
	}
</style>